<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            width:200px ;
            height: 50px;
            background-color: #005ea7;
            color: white;
        }
        .content{
            width: 200px;
        }
        .content a{
            color: black;
            display: block;
            width: 200px;
        }
        .content a:hover{
            background-color: #005ea7;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div style="height: 400px;width: 200px;">
    <div class="item">
        <div class="header">标题1</div>
        <div class="content hide">
            <a>内容1</a>
            <a>内容2</a>
            <a>内容3</a>
        </div>
    </div>
    <div class="item">
        <div class="header">标题2</div>
        <div class="content hide">
            <a>内容1</a>
            <a>内容2</a>
            <a>内容3</a>
        </div>
    </div>
    <div class="item">
        <div class="header">标题3</div>
        <div class="content hide">
            <a>内容1</a>
            <a>内容2</a>
            <a>内容3</a>
        </div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.header').click(function () {
        //console.log(this)
//        $(this).next().removeClass('hide');
//        $(this).parent().siblings().find('.content').addClass('hide')

        //链式编程
        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
    })
</script>
</body>
</html>